<!--
 * @Descripttion: 
 * @version: 
 * @Author: liangxh
 * @Date: 2020-07-14 17:56:14
 * @LastEditors: liangxh
 * @LastEditTime: 2020-07-14 18:06:17
--> 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例的生命周期</title>
</head>
<body>
  <h1>测试template和HTML的优先级</h1>
<div id="app">
  <h1>测试生命周期</h1>
  <div>{{msg}}</div>
  <hr>
  <h3>测试beforeUpdate和update两个钩子函数</h3>
  <button @click="handlerUpdate">更新数据</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: "12345"
    },
    // template:"<p>{{msg}}</p>",
    methods: {
      handlerUpdate() {
        this.msg=this.msg.split("").reverse().join("")
      }
    },
    //按照示意图依次调用
    beforeCreate(){
      console.log("调用了beforeCreate钩子函数");
    },
    created(){
      console.log("调用了created钩子函数");
    },
    beforeMount(){
      console.log('调用了beforeMount钩子函数');
    },
    mounted(){
      console.log('调用了mounted钩子函数');
    },
    beforeUpdate(){
      console.log("调用了beforeUpdate钩子函数")
    },
    updated(){
      console.log("调用了updated钩子函数");
    },
    beforeDestroy(){
      console.log("调用了beforeDestroy钩子函数");
    },
    destroyed(){
      console.log("调用了destroyed钩子函数");
    }
  })
//   beforecreate : 可以在这加个loading事件
// created ：在这结束loading，还做一些初始数据的获取，实现函数自-执行
// mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
// beforeDestroy： 你确认删除XX吗？
// destroyed ：当前组件已被删除，清空相关内容
</script>
</body>
</html>